<template lang="html">
  <div id="pageBox">
    <!-- <PageNav :navList="navList" :active="active"></PageNav> -->
    <div class="coupon-list">
      <div v-for="(item, index) in couponList" :key="index" class="coupon-item" @click.stop="onClick(item)">
        <div v-if="item.type == 'money'" class="coupon-info">
          <div class="coupon-money">￥{{item.discountAmount}}</div>
          <div class="coupon-type">抵扣券</div>
        </div>
        <div v-else-if="item.type == 'discount'" class="coupon-info">
          <div class="coupon-money">￥{{item.discountAmount * 100}}%</div>
          <div class="coupon-type">折扣券</div>
        </div>
        <div class="coupon-validtime">
          {{ parseTime(item.startValidTime, '{y}-{m}-{d}') }} - {{ parseTime(item.endValidTime, '{y}-{m}-{d}') }}
        </div>
        <div v-if="item.status === 'wait_use'"class="coupon-opear">未使用</div>
        <div v-if="item.status === 'used'" class="coupon-opear">已使用</div>
      </div>
    </div>
  </div>
</template>

<script>
import PageNav from "@/components/pageNav";
import { getMyCoupon } from '@/api/user'
import { parseTime } from '@/utils'
export default {
  components:{
    PageNav
  },
  data(){
    return {
      navList:["未使用","已使用/已过期"],
      active: 1,
      couponList: []
    }
  },
  created() {
    getMyCoupon().then(res => {
      this.couponList = res.page.list
    })
  },
  methods: {
    parseTime
  },
}
</script>

<style lang="less" scoped>
#pageBox{
  padding: .1rem .2rem;
}
.coupon-item{
    background: #EDA608;
    color: #fff;
    overflow: hidden;
    height: .6rem;
    border-radius: .04rem;
    padding: .1rem;
    margin-top: 20px;
  }
  .coupon-info{
    float: left;
    width: 1.1rem;
    text-align: center;
  }
  .coupon-money{
    font-size: .18rem;
  }
  .coupon-type{
    font-size: .12rem;
  }
  .coupon-validtime{
    padding-left: 1.2rem;
    font-size: .13rem;
    text-align: right;
    line-height: 1.8;
  }
  .coupon-opear{
    text-align: right;
    font-size: .14rem;
  }
</style>
